<template>
  <div class="contaniner">
    <h2>运单管理</h2>
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="row1">
          <el-row padding="20px">
            <el-col :span="8"><el-form-item
              label-width="100px"

              label="运单编号:
"
            >
              <el-input
                v-model="params.id"

                class="el-col-8"
                placeholder="请输入运单编号"
              />
            </el-form-item></el-col>
            <el-col :span="8">
              <el-form-item
                label="订单编号:
"
              >
                <el-input v-model="params.orderId" placeholder="请输入订单编号" />
              </el-form-item></el-col>
            <el-col :span="8"> <el-form-item
              label="调度状态:
"
            >
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="待调度" value="" />
                <el-option label="未匹配线路" value="" />
                <el-option label="已调度" value="" />

              </el-select>
            </el-form-item></el-col>
          </el-row>
        </div>
        <div class="row2">
          <el-row>
            <el-col :span="8">  <el-form-item
              label="起始地机构:
:
"
            >
              <el-select v-model="params.startAgencyId" placeholder="请选择起始地机构">
                <el-option label="东北转运中心" value="" />

              </el-select>
            </el-form-item></el-col>
            <el-col :span="8"> <el-form-item
              label="目的地机构::
"
            >
              <el-select v-model="params.endAgencyId" placeholder="请选择目的地机构">
                <el-option label="" value="" />
                <el-option label="" value="" />
                <el-option label="" value="" />

              </el-select>
            </el-form-item></el-col>
            <el-col :span="8">   <el-form-item
              label="当前所在机构::
"
            >
              <el-select v-model="params.currentAgencyId" placeholder="请选择当前所在机构">
                <el-option label="" value="" />
                <el-option label="" value="" />
                <el-option label="" value="" />

              </el-select>
            </el-form-item></el-col>
          </el-row>
        </div>
        <div class="row3">
          <el-footer>
            <el-button type="danger" @click="findList">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-footer>

        </div>

      </el-form>
    </div>

    <div class="menu">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#fff"
        text-color="black"
        active-text-color="#ffd04b"
        @select="handleSelect"
      >
        <el-menu-item index="">全部<span>{{ totalObj.total }}</span></el-menu-item>

        <el-menu-item index="1">新建<span>{{ totalObj.xjtotal }}</span></el-menu-item>
        <el-menu-item index="2">已装车<span>{{ totalObj.yzctotal }}</span></el-menu-item>

        <el-menu-item index="3">运输中<span>{{ totalObj.ysztotal }}</span></el-menu-item>
        <el-menu-item index="4">到达终端网点<span>{{ totalObj.ddzdtotal }}</span></el-menu-item>

        <el-menu-item index="6">拒收<span>{{ totalObj.jstotal }}</span></el-menu-item>

      </el-menu>
    </div>

    <div class="footer">

      <el-table
        :data="list"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"

          label="序号"
          width="150"
        />
        <el-table-column
          prop="id"
          label="运单编号"
          width="120"
        />
        <el-table-column
          prop="orderId"
          label="订单编号"
          width="120"
        />
        <el-table-column
          prop="status"
          label="运单状态"
          width="120"
        >
          <template v-slot="scope">
            <el-tag>{{ scope.row.status===1?"新建":(scope.row.status===2?"已装车":(scope.row.status===3?"运输中":(scope.row.status===4?"到达终端网点":(scope.row.status===5?"已签收":"拒收")))) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="调度状态"
          width="300"
        >
          <template v-slot="scope">
            {{ scope.row.schedulingStatus===1?"待调度":(scope.row.schedulingStatus===2?"未匹配线路":"已调度" ) }}

          </template>

        </el-table-column>
        <el-table-column
          prop="startAgencyName"
          label="起始营业部"
          width="120"
        />
        <el-table-column
          prop="endAgencyName"
          label="终点营业部"
          width="120"
        />
        <el-table-column
          prop="currentAgencyName"
          label="当前所在机构"
          width="120"
        />
        <el-table-column
          prop="nextAgencyName"
          label="下一个机构"
          width="120"
        />
        <el-table-column
          prop="totalVolume"
          label="货品总体积(立方米)"
          width="120"
        />
        <el-table-column
          prop="totalWeight"
          label="货品总重量(千克)"
          width="120"
        />
        <el-table-column
          prop="created"
          label="创建时间"
          width="120"
        />

        <el-table-column
          prop="updated"
          label="更新时间"
          width="120"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          :current-page="params.page"
          :page-sizes="[10,20,30,40]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

      </div>
    </div>

  </div></template>

<script>
import { getOrderManagerList, getOrderCount } from '@/api/business.js'
export default {

  data() {
    return {
      activeIndex2: '1',
      params: {
        page: 1,
        pageSize: 10,
        id: '',
        status: '',
        orderId: '',
        startAgencyId: '',
        endAgencyId: '',
        currentAgencyId: ''

      },
      total: 0,
      totalObj: {
        total: 0, // 全部
        xjtotal: 0, // 新建
        yzctotal: 0,
        ysztotal: 0,
        ddzdtotal: 0,
        jstotal: 0
      },
      list: [],
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333

      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }
      ]

    }
  },
  created() {
    this.getList()
  },

  methods: {
    handleSelect(e) {
      this.params = {
        page: 1,
        pageSize: 10,
        id: '',
        status: ''

      }
      this.params.status = e
      this.findList()
    },
    resetForm() {
      this.params = {
        page: 1,
        pageSize: 10,
        id: '',
        status: ''

      }
      this.getList()
    },
    findList() {
      this.params.page = 1
      this.getList()
    },
    handleCurrentChange(e) {
      console.log(e)
      this.params.page = e
      this.getList()
    },
    handleSizeChange(e) {
      console.log(e)
      this.params.pageSize = e
      this.getList()
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    onSubmit() {
      console.log('submit!')
    },
    // 获取数据
    async getList() {
      const res = await getOrderCount()
      this.totalObj = {
        total: Number(res.data[1]) + Number(res.data[2]) + Number(res.data[3]) + (res.data[4] !== undefined ? Number(res.data[4]) : 0) + Number(res.data[6]),
        xjtotal: Number(res.data[1]),
        yzctotal: Number(res.data[2]),
        ysztotal: Number(res.data[3]),
        ddzdtotal: res.data[4] !== undefined ? Number(res.data[4]) : 0,
        jstotal: Number(res.data[6])
      }
      console.log('统计', res)
      const data = {
        page: this.params.page,
        pageSize: this.params.pageSize
      }
      this.params.id ? data.id = this.params.id : ''
      this.params.status ? data.status = this.params.status : ''
      getOrderManagerList(data).then(res => {
        console.log('获取到数据', res)
        this.list = res.data.items
        this.total = Number(res.data.counts)
      })

      console.log('统计2')
    }

  }
}
</script>

<style scoped>

.top{
   background-color: #fff;
    margin: 30px;

}

.contaniner{

    background-color: #f3f4f7;

}
.menu{
    margin: 30px;
}
.footer{
    padding:50px;

    background-color: #fff;
  margin:30px;

}
.pagination{
     display:flex;
justify-content: center;
}
.row1{
  padding:30px
}
.row2{
 padding: 30px;
}
.row3{
  padding-left:30px
}

</style>
